<template>
	<view class="Global">
		
		
		<bgImage></bgImage>
	
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>
		
		<searchInput :inputcontent="inputcontent" @sendData="getInputValue"></searchInput>
		
		
		
		<view class="contentTop" id="main">
			
			<view class="contentTopLeft">
				<image class="contentTopLeftImg" src="/static/clock/yuangong.png" mode=""></image>
				<text class="contentTopLeftText">查看未录入员工</text>
			</view>
			
		</view>
		
		
		<scroll-view scroll-y="true" class="contentScrollList" :style="'height:'+scrollViewHeight+'px'">
			<view class="contentScroll">
				
				
				<view class="contentScrollItem" v-for="(item,index) in listData"  @click="listItemClick(item)">
					
					<view class="contentScrollItemLeft">
						<image class="contentScrollItemLeftImg" src="/static/clock/touxiang.png" mode=""></image>
						<text class="contentScrollItemLeftText">{{item.name}}</text>
					</view>
					<view class="contentScrollItemRight">
						<text class="contentScrollItemRightText">指纹录入</text>
					</view>
					
					
					<!-- <view class="line"></view> -->
					
				</view>
				
				
			</view>
			
			
		</scroll-view>
		
		
		
		
		<!-- 点击列表弹出-->
		<uni-popup ref="popupBag" type="center">
			<view class="bagDetail">
				
				<image src="../../../static/logo.png" class="bagDetailImg" mode=""></image>
				
				<text class="bagDetailText">门禁机nb123</text>
				<view class="bagDetailContent">
					<text class="bagDetailContentText">
						请郑建忠前往设备
						<font color='#fe0000'>（门禁机nb123）</font>
						
						处进行指纹录入
					</text>
					
				</view>
				
				<text class="bagDetailCancel" @click="close()">取消</text>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	
	import bgImage from '@/components/backgroundImage.vue'
	import searchInput from '@/components/searchInput.vue'
	
	export default {
		components: {
			MyNav,
			bgImage,
			searchInput
		},
		data() {
			return {
				title:'指纹录入',
				isback:true,
				
				inputcontent: '员工姓名/工号',
				
				
				listData:[
					{
						name:'张三'
					},
					{
						name:'张三'
					},
					{
						name:'张三'
					},
					{
						name:'张三'
					},
					{
						name:'张三'
					},
					{
						name:'张三'
					},
					{
						name:'张三'
					},
					{
						name:'张三'
					},
					{
						name:'张三'
					},
					{
						name:'张三'
					},
					{
						name:'张三'
					},
					{
						name:'张三1'
					}
				],
				
				mainTop: 0,
				scrollViewHeight:0,
				
				
			}
		},
		
		onReady() {
			
			
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top
			
				// 在其他页面或组件中访问
				const app = getApp();
				this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
					.totalHeight
			
			
				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();
			
		},
		methods: {
			// 列表点击事件
			listItemClick(e) {
			
				this.open(e)
			},
			// 打开弹框
			open(e) {
				// console.log('点了');
				this.$refs.popupBag.open('center')
				console.log('列表点击事件', e);
				this.listItemData = e
			
			
			},
			// 关闭弹框
			close() {
				this.$refs.popupBag.close()
			},
			
			// 获取输入框的值
			getInputValue(e) {
				console.log('获取输入框的值', e);
			},
			
			
		}
	}
</script>

<style>
	.lineBg1 {
		width: 100%;
		height: 20rpx;
		background: #F9FCFF;
	}
	
	.bagDetailCancel {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
	
	
	}
	
	.bagDetailDelete {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: red;
	
	}
	
	.bagDetailUpadte {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border-radius: 20rpx 20rpx 0 0; */
		/* background-color: white; */
	}
	
	.bagDetailContentTextColor{
		
		
		
		
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #0081FF;
	}
	.bagDetailContentText{
		
		
		
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		
	}
	.bagDetailContent{
		display: flex;
		
	}
	.bagDetailText{
		display: flex;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	
	}
	.bagDetailImg{
		display: flex;
		justify-content: center;
		margin-top: 80rpx;
		width: 80rpx;
		height: 172rpx;
	}
	
	.bagDetail {
		width: 630rpx;
		height: 596rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	
	
	}
	.line {
		width: 630rpx;
		height: 1rpx;
		background: #F9FCFF;

	}
	.contentScrollItemRightText{
		
		display: flex;
		align-items: center;
		justify-content: center;
		
		width: 142rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2px solid #0081FF;
		
		
	
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0081FF;
		
		
		margin-right: 30rpx;
	}
	.contentScrollItemRight{
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.contentScrollItemLeftText{
		display: flex;
		
		
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;
		
		
	}
	.contentScrollItemLeftImg{
		display: flex;
		align-items: center;
		
		width: 60rpx;
		height: 60rpx;
		margin-right: 30rpx;
		margin-left: 30rpx;
	}
	
	.contentScrollItemLeft{
		display: flex;
		
		justify-content: center;
		align-items: center;
		height: 100%;
		
	}
	
	.contentScrollItem{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 120rpx;
		
		border-bottom: #F9FCFF solid 1rpx;
		
	}
	 
	
	.contentScrollList{
		
		display: flex;
		justify-content: center;
		align-items: center;
			flex-direction: column;
		width: 690rpx;
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 30rpx; 
		margin-top: 30rpx;
	}
	.contentScroll{
		
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		width: 100%;
	}
	
	.contentTopLeftText{
		display: flex;
	
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		
	}
	.contentTopLeftImg{
		display: flex;
		width: 30rpx;
		margin-right: 15rpx;
		margin-left: 15rpx;
		height: 30rpx;
	}
	.contentTopLeft{
		display: flex;
		align-items: center;
		justify-content: center;
		
		width: 690rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 16rpx;
	}
	.contentTop{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 30rpx;
		
		width: 100%;
		
	}

</style>
